<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div class="box">
      <div class="center-pic">
        <img src="../../assets/img/zjtd.png" alt="" />
      </div>

      <div class="member-center clearfix">
        <div class="left-nav fl">
          <ul>
            <!-- 进行切换子页面，写法同vue.js -->
            <li :class="[activeIndex == 1 ? 'acitve' : '']" @click="navTab(1)">
              <!-- <nuxt-link to="/zjTeam/sczj" class="clearfix"> -->
              <a class="clearfix">
                <img src="../../assets/img/sczj.png" class="fl" />
                <span class="fl">蔬菜专家团队</span>
                <img
                  src="../../assets/img/arrow-right.png"
                  class="fr arrow-right"
                />
              </a>
              <!-- </nuxt-link> -->
            </li>
            <li :class="[activeIndex == 2 ? 'acitve' : '']" @click="navTab(2)">
              <!-- <nuxt-link to="/memberCenter/myOrder" class="clearfix"> -->
              <a class="clearfix">
                <img src="../../assets/img/sgzj.png" class="fl" />
                <span class="fl">水果专家团队</span>
                <img
                  src="../../assets/img/arrow-right.png"
                  class="fr arrow-right"
                />
              </a>
              <!-- </nuxt-link> -->
            </li>
          </ul>
        </div>

        <div
          id="s1"
          v-show="activeIndex == 1 || activeIndex == 0"
          class="right-main fr"
        >
          <div class="div1">
            <img src="../../assets/img/sczjimg.png" width="337" height="240" />
          </div>
          <div class="div2">
            <p>
              应用于农业的各个领域，如作物栽培、植物保护、配方施肥、农业经济效益分析、市场销售管理等。例如，病虫草害防治专家系统是针对作物不同时期出现的各种症状和不同环境条件，诊断可能出现的病虫草灾害，提出有效的防治方法。栽培管理专家系统是在各个作物的不同生育期，根据不同的生态条件，进行科学的农事安排，其中包括栽培、施肥、灌水、植物保护等。栽培部分包括品种选择、种子准备、整地、播种、田间管理与收获，优化它们之间及其与产量之间的关系；施肥部分主要是优化肥料与产量的关系，水分管理部分主要是合理灌排，优化水分与产量的关系；植保部分主要是病虫草害的预测和控制。
            </p>
          </div>
        </div>
        <div id="s2" v-show="activeIndex == 2" class="right-main fr">
          <div class="div1">
            <img src="../../assets/img/sgzjimg.png" width="337" height="240" />
          </div>
          <div class="div2">
            <p>
              采收后的水果与生长在树上一样，是一个活的有机体，水果在贮藏过程中，仍然不停地进行呼吸。为了尽可能地保存水果的品质，提高水果抵御外界微生物侵袭的能力，以下方法和措施可有效地确保贮藏期的延长：　　合理的采收时期和采摘方法　水果采收过早或过迟均不耐贮藏，整个采收期也不宜拖延太长，一般在最适宜采收期的前后10天内采摘完毕。采摘时要轻拿轻放，避免机械损伤，做好伤病果和好果的分别处理。植物杀菌素处理　大蒜、洋葱或大茴香的气味等含有杀菌素，可以用葱蒜汁液加水稀释后浸果，或将茴香油浸包果纸再包果以及在果筐内垫松柏叶，可以防止果实腐烂；用甲基托布津、多菌灵等药剂浸果处理，其杀菌效果也非常理想；植物生长素2.4-d对柑橙类水果的贮藏保鲜效果很好，但目前大力推广无公害水果生产，2.4-d不宜再使用。
            </p>
          </div>
        </div>
      </div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage,
  },
  data() {
    return {
      activeIndex: 0,
    };
  },
  mounted() {},
  methods: {
    navTab(index) {
      this.activeIndex = index;
    },
  },
};
</script>
<style scoped>
.box {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 20px;
  min-height: 800px;
  background: #fff;
}

.member-center {
  width: 1200px;
  margin: 85px 31px 0px 0px;
  min-height: 463px;
}
.left-nav {
  width: 278px;
  background: #fff;
  min-height: 403px;
}
.left-nav ul {
  /* padding-top: 20px; */
}
.left-nav ul li {
  line-height: 51px;
  text-indent: 20px;
  border-bottom: 1px solid #ebebeb;
  cursor: pointer;
}
.left-nav ul li a {
  display: block;
  width: 100%;
}
.left-nav ul li a img:nth-child(1) {
  width: 17px;
  height: 17px;
  margin-right: 15px;
  margin-top: 17.5px;
  margin-left: 15px;
}
.left-nav ul li a img.arrow-right {
  width: 17px;
  height: 17px;
  margin-right: 20px;
  margin-top: 17.5px;
}
.left-nav ul li a span {
  color: #5d5d5d;
  font-size: 14px;
}
.left-nav ul li:hover a {
  color: #ee781b;
}
.left-nav ul li.acitve a span {
  color: #ee781b;
}
.left-nav ul li.acitve div {
  color: #ee781b;
}
.right-main {
  width: 912px;
  min-height: 403px;
  background: white;
  border: 1px;
}
.right-main .div1 {
  margin: 30px 20px 0px 31px;
  float: left;
  width: 337px;
}
.right-main .div2 {
  margin-top: 30px;
  float: left;
  width: 445px;
  border: 1px;
  line-height: 25px;
}
.person-manger {
  height: 105px;
}
.person-manger img {
  width: 192px !important;
  height: 64px !important;
  margin-left: 15px;
  margin-top: 20px;
}
.center-pic {
  width: 1200px;
  height: 83px;
  margin: 0 auto;
}
.center-pic img {
  width: 100%;
  height: 157px;
}
</style>
